<div id="tabs" style="border-top: none;border-bottom: none;min-height: 500px">
    <ul>
        <li><a href="#tabs-1">Package Information</a></li>
        <li><a href="#tabs-2">Product List</a></li>
    </ul>
    <div id="tabs-1">
        <input type="hidden" name="txtID" id="txtID" value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->ID|escape:'html'}}{{/if}}"/>
        <table class="w920px">
            <tr>
                <td class="w100  blue">Package Name</td>
                <td>
                    <div class="pr10">
                        <input id="txtPackageName" name="txtPackageName" type="text"  class="classic-input w100pc"
                               value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->PackageName|escape:'html'}}{{/if}}"
                               onblur="getAliasTo('#txtPackageName','#txtAlias')"
                               />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100  blue">Alias</td>
                <td>
                    <div class="pr10">
                        <input id="txtAlias" name="txtAlias" type="text"  class="classic-input w100pc"
                               value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->Alias|escape:'html'}}{{/if}}"
                               />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100  blue">Unit Price</td>
                <td>
                    <div class="pr10">
                        <input id="txtUnitPrice" name="txtUnitPrice" type="number" min="0"  class="classic-input w100pc"
                               value="{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->UnitPrice|escape:'html'}}{{/if}}"
                               />
                    </div>
                </td>
            </tr>
            <tr>
                <td class="w100  vtat"><label class="lh24">Description</label></td>
                <td>
                    <div class="">
                        <textarea id="txtDescription" name="txtDescription" style="resize: vertical;" class="classic-input w100pc">{{if isset($Data["OBJ"])}}{{$Data["OBJ"]->Description|escape:'html'}}{{/if}}</textarea>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div id="tabs-2">
        <div class="List">
            <div class="pr4 pb28 pt4">
                <div class="grid_11">
                    <div style="width: 402px">
                        <input id="txtProductToken" class="classic-input w100pc"/>
                    </div>
                </div>
                <div class="grid_x">
                    <p>
                        Nếu website hiện thị không được tốt vui lòng cập nhật trình duyệt Google Chrome hoặc FireFox bản mới nhất.<br/>
                        Tìm kiếm sản phẩm(product) và thêm vào gói(package).<br/>
                        Chỉnh số lượng các sản phẩm trong gói.
                    </p>
                </div>
            </div>
            <div class="clear"></div>
            <div class=" grid_x">
                <div id="AlbumItems">
                    {{$tokenpreview=[]}}
                    {{if isset($Data["Products"])}}
                        {{foreach $Data["Products"] as $pr}}
                            {{$tokenpreview[]=['ProductID'=>$pr->ProductID,'ProductName'=>$pr->ProductName,'Image'=>$pr->Image,'UnitPrice'=>$pr->UnitPrice]}}
                        <div class="AlbumItem Pr_{{$pr->ProductID}} grid_5 mb4 mt4 ml4 mr4 bdccc gadiend-white">
                            <div class="pt1 pb1 pl1 pr1">
                                <div class="pl8 pt4 pb4 pr8 ovfh mt0 mb0 mr0 ml0 bdbccc productname">{{$pr->ProductName|escape:'html'}}</div>
                                <div class="pa r8 t4">
                                    <span class="hover50" style="cursor: pointer" 
                                          title="Delete this item"
                                          onclick="DelProductItem(this)">✖</span>
                                </div>
                                <div class="pl4 pr4 pt4 pb4 mt0 mb0 ml0 mr0 ovfh pr" style="height: 200px">
                                    <img title="${{$pr->UnitPrice}}" class="bgloadding32" alt="thumb" src="{{$pr->Image|escape:'html'}}"/>
                                </div>
                                <div class="pr10">
                                    <input class="classic-input w100pc num" type="number" min="1"
                                           onchange="getPackageCash()"
                                           title="Product number"
                                           value="{{$Data["tmp"][$pr->ProductID]}}"/>
                                    <input type="hidden" class="hidden productid" value="{{$pr->ProductID}}"/>
                                    <input type="hidden" class="hidden unitprice" value="{{$pr->UnitPrice}}"/>
                                </div>
                            </div>
                        </div>
                        {{/foreach}}
                    {{/if}}
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
</div>
<!--<div class="pt8">
    <button class="gray-button" title="Back to grid and ignore any unsaved changes" onclick="myjqxGrid.CancelEdit()"><span>Back</span></button>
    <button class="green-button" title="Apply any changes" onclick="SaveItem()"><span>Save</span></button>
</div>-->
<script>
    $(document).ready(function () {
        try{
            $( "#tabs" ).tabs();
            addEditorContent("txtDescription");
            $("#txtProductToken").tokenInput("{{base_url()}}backend/product/tokenProduct", {
                resultsFormatter: function(item){ return "<li title=\"<img class='bgloadding32' alt='thumb' height='80px' src='"+item.Image+"'/>\"><div style='width:40px;color:#000;float:left;'>" + item.ProductID + "</div> " + item.ProductName + " <font color='#E40451'> $" + item.UnitPrice + "</font></li>" },
                tokenFormatter  : function(item){ return "<li title=\"<img class='bgloadding32' alt='thumb' height='80px' src='"+item.Image+"'/>\">" + item.ProductName + " <font color='#E40451'> $" + item.UnitPrice + "</font></li>" },
                preventDuplicates: true,
                searchDelay: 1000,
                propertyToSearch: "ProductName",
                hintText:"Enter to search product",
                minChars: 1,
                //theme: "facebook",
                tokenLimit: 10,
                prePopulate: {{$tokenpreview|@json_encode}},
                onAdd: function (item) {
                    console.log(item.ProductID);
                    AddProductItem(item);
                },
                onDelete: function (item) {
                    $(".AlbumItem.Pr_"+item.ProductID).remove();
                    getPackageCash();
                }
            });
        }catch(e){ }
    });
</script>